<template>
	<view class="page-wrapper">
		<view class="menu-seprate-list" style="margin-top: 40rpx;">
			<view class="menu-item" @click="navigateToUniPage('/pages/account/index')">
				<view class="label-box">
					<text>{{ $t('pages.setting.AccountAndSecurity') }}</text>
				</view>
				<view class="label-box">
					<up-icon name="arrow-right" class="icon"></up-icon>
				</view>
			</view>

			<view class="menu-item" @click="clearCahce">
				<view class="label-box">
					<text>{{ $t('pages.setting.ClearCache') }}</text>
				</view>
				<view class="label-box">
					<text style="font-weight: lighter;">{{ cacheSize }}</text>
					<up-icon name="arrow-right" class="icon"></up-icon>
				</view>
			</view>

            <view class="menu-item" @click="changeLanguage">
				<view class="label-box">
					<text>{{ $t('pages.setting.ChangeLanguage') }}</text>
				</view>
				<view class="label-box">
                    {{ $t('currentLang') }}
					<up-icon name="arrow-right" class="icon"></up-icon>
				</view>
			</view>
		</view>
		
		<view>
			<up-button :text="$t('common.logout')" size="normal" type="primary" 
                style="width: 560rpx;margin-top:80rpx;" @click="toLogout(t)" shape="circle"></up-button>
		</view>
	</view>
</template>

<script setup>
	import { ref, } from 'vue';
	import { toLogout, navigateToUniPage, } from '@/utils/index.js';
	import { onLoad, } from '@dcloudio/uni-app';
    import { useI18n } from 'vue-i18n';	
	
	
    const { t, locale, } = useI18n();
	const cacheSize = ref('0MB');
	const getCacheSize = ()=>{
		// #ifdef APP-PLUS
		plus.cache.calculate((size) => {
			let new_size = size / (1024 * 1024)
			if (new_size < 1024) {				 
				cacheSize.value = (new_size).toFixed(2) + 'MB'
			} else {				 
				cacheSize.value = (new_size / 1024).toFixed(2) + 'GB'
			}
		});
		// #endif
	}
	const clearCahce = ()=>{
		// #ifdef APP-PLUS
		uni.showModal({
			title: t('common.confirm_title'),
			content: t('pages.setting.confirmRemoveText'),
			confirmText: t('common.confirm'),
			cancelText:  t('common.cancel'),
			success: function (res) {
				if (res.confirm) {
					plus.cache.clear(() => {
						uni.showToast({
							title: t('common.operate_ok'),
							icon: 'none',
							success: () => {
								getCacheSize();
							}
						})
					})
				} 
			}
		});
		// #endif
	}

	// 正式切换App的语言
    const changeAppLang = (targetLang='en')=>{
        const currentLang = uni.getLocale();
        if(currentLang!=targetLang){
            uni.showModal({
            	title: t('common.confirm_title'),
				content: t('common.langComfirm'),
				success(res) {
					if(res.confirm){
						uni.setLocale(targetLang);						
						// IOS 手动修改语言类型
						uni.getSystemInfo({
						    success(res) {
						        if (res.osName == 'ios') {
									// IOS 手动切换语言
									locale.value = targetLang;
									uni.reLaunch({ url: '/pages/user/index' });										
						        } 
						    }
						});
						// #ifdef H5
						setTimeout(()=>{
						    location.reload();
						},100)
						// #endif
					}
				}
            })
        }
    }

    const changeLanguage = ()=>{
        uni.showActionSheet({
            itemList: [
                t('locale.en'), 
                t('locale.zh-simple'), 
                // t('locale.zh-tradition'),
            ],
            success: function (res) {
                if(res.tapIndex==0){
                    changeAppLang('en');
                }else if(res.tapIndex==1){
                    changeAppLang('zh-Hans');
                }else if(res.tapIndex==2){
                    changeAppLang('zh-Hant');
                }                
            },
            fail: function (res) {
                console.log(res.errMsg);
            }
        });
    }
	
	onLoad(()=>{
		getCacheSize();
	})
</script>


<style lang="scss" scoped>
	.menu-item{
		font-weight: normal;
	}    
</style>
